<template>
	<view class="sign_in">
		<view class="sign_top">
			<view class="sign_header">
				<p>{{date}}</p><span></span>
				<p>{{sign2==1?"Signed in":"Not clocking in"}}</p>
			</view>
			<view class="sign_day"
				:style="{ color: sign1==0&&sign2==0 ? '#999':sign1==1&&sign2==1 ? '#FF3C15' : '#FF947F' }">
				{{day}}
			</view>
			<view class="sign_btn row between">
				<p @click.stop="handleSign(1)" :style="{ background: sign1==1 ? '#FF3C15' : '#0BB613' }">morning</p>
				<p @click.stop="handleSign(2)" :style="{ background: sign2==1 ? '#FF3C15' : '#0BB613' }">afternoon</p>
			</view>

			<view class="tips_sign" v-if="sign1==1&&sign2==1">
				<image src="/static/win.png" mode=""></image>
				<p>win <span>{{money}}</span>EGP</p>
			</view>
			<view class="tips row" v-else>
				Sign in and receive <font style="color: #FF7458;">{{money}} EGP</font> per day
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTodayDate
	} from "@/utils/utils";
	import {
		getSignInfo,
		todaySign
	} from "@/lib/service.js";
	export default {
		data() {
			return {
				date: "",
				day: "",
				sign1: 0,
				sign2: 0,
				money: '0'
			}
		},
		onLoad() {
			const dateStr = getTodayDate()
			const [year, month, day] = dateStr.split('-');
			this.date = `${year}-${parseInt(month, 10)}`;
			this.day = parseInt(day, 10);
			this.handleSignInfo();
		},
		methods: {
			handleSignInfo() {
				getSignInfo().then(res => {
					console.log(res)
					this.sign1 = res.data.sign1;
					this.sign2 = res.data.sign2;
					this.money = res.data.money;
				})
			},
			handleSign(type) {
				let _this = this;
				if (type == 1 && this.sign1 == 1) {
					uni.showToast({
						icon: 'none',
						title: 'You have already checked in this morning',
					})
					return;
				}
				if (type == 2 && this.sign2 == 1) {
					uni.showToast({
						icon: 'none',
						title: 'You have already checked in this afternoon',
					})
					return;
				}
				todaySign({
					sign: type
				}).then(res => {
					if (res.statusCode == 0) {
						uni.showToast({
							icon: 'none',
							title: 'Sign in successfully',
						})
						_this.handleSignInfo();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message,
						})
					}

				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.sign_in {
		margin: 34rpx;

		.sign_top {
			height: 480rpx;
			background: #F4F4F4;
			border-radius: 40rpx;

			.sign_header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 34rpx 0;

				p {
					width: 49%;
					color: #333333;
					text-align: center;
					font-family: Microsoft YaHei UI;
					font-weight: 400;
					font-size: 32rpx;
				}

				span {
					width: 2rpx;
					height: 20rpx;
					background: #000000;
				}
			}

			.sign_day {
				text-align: center;
				font-family: Impact;
				font-weight: 400;
				font-size: 300rpx;
				color: #999999;
			}

			.sign_btn {
				margin-top: 30rpx;

				p {
					width: 320rpx;
					height: 94rpx;
					background: #0BB613;
					border-radius: 20rpx;
					color: #ffffff;
					text-align: center;
					line-height: 94rpx;
					font-size: 32rpx;
				}

			}

			.tips {
				margin-top: 10vh;
				justify-content: center;
			}

			.tips_sign {
				text-align: center;
				margin-top: 77rpx;

				image {
					width: 66rpx;
					height: 76rpx;
				}

				p {
					margin-top: 20rpx;
					color: #FF3C15;
					font-weight: 600;

					span {
						display: inline-block;
						font-size: 44rpx;
						padding: 0 10rpx;
					}
				}
			}
		}
	}
</style>